<script setup lang="ts">
import NavBar from '@renderer/components/navBar.vue'
import useSetting from '@renderer/composables/useSetting'
import { reactive, ref } from 'vue'
import { Action, ElMessageBox } from 'element-plus'
let adjustInfo = reactive({})
const adjustList = reactive([
  {
    name: '预算模版',
    showName: '',
    key: 'budget_type_id',
    type: 0,
  },
  {
    name: '水电改造',
    showName: '',
    key: 'shui_dian_nuan_id',
    type: 0,
  },
  {
    name: '防水立管',
    showName: '',
    key: 'water_pipe_id',
    type: 0,
  },
  {
    name: '瓦工',
    showName: '',
    key: 'bricklayer_id',
    type: 0,
  },
  {
    name: '木工',
    showName: '',
    key: 'carpentry_id',
    type: 0,
  },
  {
    name: '木地板',
    showName: '',
    key: 'wood_floor_id',
    type: 0,
  },
  {
    name: '墙漆',
    showName: '',
    key: 'wall_paint_id',
    type: 0,
  },
  {
    name: '美缝',
    showName: '',
    key: 'beauty_sewing_id',
    type: 0,
  },
  {
    name: '墙漆面积含窗口面积',
    key: 'wall_paint_contain_window',
    type: 1,
  },
  {
    name: '墙漆面积含门口面积',
    key: 'wall_paint_contain_door',
    type: 1,
  },
  {
    name: '墙漆面积含柜子投影面积',
    key: 'wall_paint_contain_cabinet_shadow',
    type: 1,
  },
  {
    name: '地暖面积含柜子遮盖面积',
    key: 'ground_contain_cabinet_cover',
    type: 1,
  },
  {
    name: '踢脚线米数不含柜子门口',
    key: 'skirting_line_no_contain_door',
    type: 1,
  },
  {
    name: '合计为0是否显示',
    key: 'show_zero',
    type: 1,
  },
])
const selectTemplateDialog = ref(false)
const selectTemplateKey = ref<string>()
const selectTemplateName = ref<string>()
const handleClose = () => {
  selectTemplateDialog.value = false
}
const handleTemplate = async (item: any) => {
  await getCalculateTemplate({ cate: item.name })
  selectTemplateKey.value = item.key
  selectTemplateName.value = item.showName
  selectTemplateDialog.value = true
}
const handleSelectTemplate = (id: number, name: string) => {
  adjustInfo[selectTemplateKey.value!] = id
  const findIndex = adjustList.findIndex((item) => item.key == selectTemplateKey.value)
  if (findIndex != -1) {
    adjustList[findIndex].showName = name
  }
}
const handleSave = async () => {
  ElMessageBox.alert('本次修改数据，只对新创建的“模板/预算”生效。', '温馨提示', {
    showCancelButton: true,
    callback: async (action: Action) => {
      if (action == 'confirm') {
        await setCalculate(adjustInfo)
      }
    },
  })
}
const initPage = async () => {
  await getCalculate()
  adjustList.map((item) => {
    if (item.type == 0) {
      item.showName = functionInfo.value![item.key.replace('_id', '') + '_name']
    } else if (item.type == 1) {
      adjustInfo[item.key] = functionInfo.value![item.key]
    }
  })
  let deleteKey = [
    'id',
    'wood_floor',
    'wood_floor_name',
    'water_pipe_name',
    'water_pipe',
    'wall_paint_name',
    'wall_paint',
    'shui_dian_nuan_name',
    'shui_dian_nuan',
    'company_id',
    'carpentry',
    'carpentry_name',
    'budget_type',
    'budget_type_name',
    'bricklayer',
    'bricklayer_name',
    'beauty_sewing',
    'beauty_sewing_name',
  ]
  deleteKey.map((item) => {
    delete functionInfo.value![item]
  })
  adjustInfo = functionInfo.value!
}
const { getCalculateTemplate, templateList, getCalculate, functionInfo, setCalculate } = useSetting()
initPage()
</script>

<template>
  <main class="bg-white flex flex-col justify-between rounded-md" style="height: -webkit-fill-available">
    <el-form :model="adjustInfo" label-width="auto">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in adjustList" :key="index" :span="12">
          <el-form-item :label="item.name + ':'">
            <el-input
              v-model="item.showName"
              placeholder="请选择"
              readonly
              v-if="item.type == 0"
              @click="handleTemplate(item)" />
            <el-radio-group v-model="adjustInfo[item.key]" placement="row" v-else>
              <el-radio label="是" :value="1" :customStyle="{ marginRight: '35px' }" />
              <el-radio label="否" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="flex justify-center" @click="handleSave">
      <button class="save-button">保存设置</button>
    </div>
    <el-dialog v-model="selectTemplateDialog" width="1000" align-center :show-close="false" style="padding: 0">
      <div class="flex flex-col pb-4">
        <NavBar @handleClose="handleClose" title="请选择模版" />
        <div class="flex flex-col px-6 pt-4 gap-10 h-[600px] overflow-y-auto">
          <div
            class="flex flex-col gap-4 p-6"
            v-for="(item, index) in templateList"
            :key="index"
            @click="handleSelectTemplate(item.id, item.name)"
            :style="{ border: adjustInfo[selectTemplateKey!] == item.id ? '1px solid #FF9600' : '' }">
            <el-divider>
              <span class="text-xl">{{ item.name }} </span>
            </el-divider>
            <span class="text-[#888888] text-sm">说明{{ item.descr }}</span>
            <div class="flex flex-wrap gap-6">
              <el-image
                style="width: 100px; height: 100px"
                :src="imageItem.url"
                :initial-index="4"
                fit="cover"
                v-for="(imageItem, imageIndex) in item.images"
                :key="imageIndex" />
            </div>
          </div>
        </div>
        <div class="flex justify-center" @click="handleClose">
          <div class="save-button">保存设置</div>
        </div>
      </div>
    </el-dialog>
  </main>
</template>

<style lang="scss" scoped>
.save-button {
  @apply text-white px-16 py-3 rounded-md;
  background: linear-gradient(142deg, #ff9600 0%, #ffb242 100%);
}
::v-deep .el-dialog__header {
  padding-bottom: 0 !important;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ff9600 !important;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ff9600 !important;
  border-color: #ff9600 !important;
}
</style>
